import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Stack, Text } from '@fluentui/react';
import { Card } from '@fluentui/react-components';
import { fetchUsers, fetchTasks } from './actions';

function Dashboard() {
    const dispatch = useDispatch();
    const users = useSelector(state => state.users);
    const tasks = useSelector(state => state.tasks);
    const currentUser = useSelector(state => state.currentUser);

    useEffect(() => {
        dispatch(fetchUsers());
        dispatch(fetchTasks());
    }, [dispatch]);

    return (
        <Stack tokens={{ childrenGap: 20 }} styles={{ root: { padding: 20 } }}>
            <Text variant="xxLarge">Welcome, {currentUser?.username}!</Text>
            <Stack horizontal tokens={{ childrenGap: 20 }}>
                <Card>
                    <Text>Total Users:{users.length}</Text>
                </Card>
                <Card>
                    <Text>Total Tasks:{tasks.length}</Text>
                </Card>
            </Stack>
        </Stack>
    );


}

export default Dashboard;
